<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.id ? '新增学习记录' : '修改学习记录'"
    :close-on-click-modal="false"
    width="600px"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
      @keyup.enter="onSubmit()"
    >
      <el-form-item
        label="用户ID"
        prop="userId"
      >
        <el-input
          v-model="dataForm.userId"
          placeholder="请输入用户ID"
        />
      </el-form-item>

      <el-form-item
        label="课程ID"
        prop="courseId"
      >
        <el-input
          v-model.number="dataForm.courseId"
          placeholder="请输入课程ID"
        />
      </el-form-item>

      <el-form-item
        label="课时ID"
        prop="lessonId"
      >
        <el-input
          v-model.number="dataForm.lessonId"
          placeholder="请输入课时ID（可选）"
        />
      </el-form-item>

      <el-form-item
        label="学习进度(%)"
        prop="progress"
      >
        <el-input-number
          v-model="dataForm.progress"
          :min="0"
          :max="100"
          placeholder="请输入学习进度"
        />
      </el-form-item>

      <el-form-item
        label="完成状态"
        prop="isCompleted"
      >
        <el-select
          v-model="dataForm.isCompleted"
          placeholder="请选择完成状态"
        >
          <el-option
            label="未完成"
            :value="0"
          />
          <el-option
            label="已完成"
            :value="1"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="试看状态"
        prop="isFreeView"
      >
        <el-select
          v-model="dataForm.isFreeView"
          placeholder="请选择试看状态"
        >
          <el-option
            label="否"
            :value="0"
          />
          <el-option
            label="是"
            :value="1"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="视频位置(秒)"
        prop="videoPosition"
      >
        <el-input-number
          v-model="dataForm.videoPosition"
          :min="0"
          placeholder="请输入视频播放位置"
        />
      </el-form-item>

      <el-form-item
        label="学习时长(分)"
        prop="studyDuration"
      >
        <el-input-number
          v-model="dataForm.studyDuration"
          :min="0"
          placeholder="请输入学习时长"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          @click="onSubmit()"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const visible = ref(false)
const dataFormRef = ref()
const dataForm = reactive({
  id: '',
  userId: '',
  courseId: '',
  lessonId: '',
  progress: 0,
  isCompleted: 0,
  isFreeView: 0,
  videoPosition: 0,
  studyDuration: 0
})

const dataRule = {
  userId: [
    { required: true, message: '用户ID不能为空', trigger: 'blur' }
  ],
  courseId: [
    { required: true, message: '课程ID不能为空', trigger: 'blur' }
  ]
}

const init = (id) => {
  visible.value = true
  dataForm.id = ''
  dataFormRef.value?.clearValidate()
  if (id) {
    getInfo(id)
  } else {
    dataForm.progress = 0
    dataForm.isCompleted = 0
    dataForm.isFreeView = 0
    dataForm.videoPosition = 0
    dataForm.studyDuration = 0
  }
}

const getInfo = (id) => {
  http({
    url: http.adornUrl(`/admin/userCourseProgress/info/${id}`),
    method: 'get'
  }).then(({ data }) => {
    Object.assign(dataForm, data)
  })
}

const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (!valid) {
      return false
    }
    http({
      url: http.adornUrl(dataForm.id ? '/admin/userCourseProgress/update' : '/admin/userCourseProgress/add'),
      method: 'post',
      data: dataForm
    }).then(({ data }) => {
      ElMessage.success(dataForm.id ? '修改成功' : '新增成功')
      visible.value = false
      emit('refresh-data-list')
    })
  })
}

defineExpose({
  init
})

const emit = defineEmits(['refresh-data-list', 'close'])
</script>

